<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-navbar :fixed="false" :placeholder="true" title="维保任务" @leftClick="leftClick" bgColor="#0F53AC"
				leftIconColor="#fff">
			</u-navbar>
			<u-tabs :list="list" lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			<view class="dropdown" v-if="current==0">
				<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
					<zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first">
					</zb-dropdown-item>
					<zb-dropdown-item :options="option2" v-model="value2" @change="change2" name="two">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
			<view class="dropdown" v-if="current==1">
				<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
					<zb-dropdown-item :options="option3" v-model="value3" @change="change3" name="two">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
		</u-sticky>
		<view class="tab-page" v-if="current==0">
			<view class="item-title">仅展示当天及逾期未维保任务</view>
			<view class="list-wrapper" v-for="(item,index) in wbList" :key="index">
				<u-gap height="8" bgColor="#f2f2f2" v-if="index != 0"></u-gap>
				<view class="list-info">
					<view class="list-title">
						<view class="title-left">
							工单号:{{item.taskOrderNum}}
							<view class="copy" @click="copyOrderNum(item.taskOrderNum)">复制</view>
						</view>
						<view class="title-right"
							:class="[item.maintainStatus==0?'title-dyz':item.maintainStatus==1?'title-ongoing':'']">
							{{item.maintainStatus==0?'待维保':item.maintainStatus==1?'维保中':''}}
						</view>
					</view>
				</view>
				<view class="list-main">
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">设备名称</view>
							<view class="txt2">{{item.deviceName?item.deviceName:'--'}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">编号</view>
							<view class="txt2">{{item.deviceNum?item.deviceNum:'--'}}</view>
						</view>
					</view>
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">维保类型</view>
							<view class="txt2">{{item.maintainTypeName?item.maintainTypeName:'--'}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">维保周期</view>
							<view class="txt2">{{item.period?(item.period+item.periodUnit):'--'}}</view>
						</view>
					</view>
					<!-- <view class="gz-desc">
						<view class="title">故障描述</view>
						<view class="desc-reason">fdsfdsfdsffdsfdsf</view>
					</view> -->
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">维保人</view>
							<view class="txt2">{{item.maintainUserName?item.maintainUserName:'--'}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">计划开始时间</view>
							<view class="txt2">{{item.planBeginDate}}</view>
						</view>
						<!-- <view class="main-left">
							<view class="txt1">计划开始时间</view>
							<view class="txt2">{{item.planBeginDate?item.planBeginDate:'--'}}</view>
						</view> -->
					</view>
					<!-- <view class="item-main">
						<view class="main-left">
							<view class="txt1">报修人</view>
							<view class="txt2">张三</view>
						</view>
						<view class="main-left">
							<view class="txt1">报修时间</view>
							<view class="txt2">2022/2/16 20:11:11</view>
						</view>
					</view> -->
				</view>
				<view class="item-btn" @click="toStartweibao(item)">
					<view class="ruku">{{item.maintainStatus==0?'开始维保':item.maintainStatus==1?'继续维保':''}}</view>
				</view>
				<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			</view>
			<view class="bottom-subside" v-if="total<6"></view>
			<u-loadmore v-if="total>5" :status="status" :line="true" height="200rpx" />
		</view>
		<view class="tab-page" v-if="current==1">
			<view class="item-title">仅展示近三个月维保任务</view>
			<view class="list-wrapper" v-for="(item,index) in wbList" :key="index">
				<u-gap height="8" bgColor="#f2f2f2" v-if="index != 0"></u-gap>
				<view class="list-info">
					<view class="list-title">
						<view class="title-left">
							工单号:{{item.taskOrderNum}}
							<view class="copy" @click="copyOrderNum(item.taskOrderNum)">复制</view>
						</view>
						<view class="title-right"
							:class="[item.maintainStatus==9?'title-close':item.maintainStatus==2?'title-finish':'']">
							{{item.maintainStatus==9?'取消维保':item.maintainStatus==2?'维保完成':''}}
						</view>
					</view>
				</view>
				<view class="list-main">
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">设备名称</view>
							<view class="txt2">{{item.deviceName?item.deviceName:'--'}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">编号</view>
							<view class="txt2">{{item.deviceNum?item.deviceNum:'--'}}</view>
						</view>
					</view>
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">维保类型</view>
							<view class="txt2">{{item.maintainTypeName?item.maintainTypeName:'--'}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">维保周期</view>
							<view class="txt2">{{item.period?item.period+item.periodUnit:'--' }}</view>
						</view>
					</view>
					<!-- <view class="gz-desc">
						<view class="title">故障描述</view>
						<view class="desc-reason">fdsfdsfdsffdsfdsf</view>
					</view> -->
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">维保结果</view>
							<view class="txt2"
								:class="[item.maintainResult==1?'txt-zc':item.maintainResult==2?'txt-yc':'']">
								{{item.maintainResult==1?'正常':item.maintainResult==2?'异常':''}}
							</view>
						</view>
						<view class="main-left">
							<view class="txt1">维保费用</view>
							<view class="txt2">{{item.maintainFee?item.maintainFee:'0'}}元</view>
						</view>
					</view>
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">维保人</view>
							<view class="txt2">{{item.maintainUserName?item.maintainUserName:'--'}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">维保完成时间</view>
							<view class="txt2">{{item.factEndDate?item.factEndDate:'--'}}</view>
						</view>
					</view>
				</view>
				<view class="item-btn" @click="toSelectDetail(item)">
					<view class="ruku">查看详情</view>
				</view>
				<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			</view>
			<view class="bottom-subside" v-if="total<6"></view>
			<u-loadmore v-if="total>5" :status="status" :line="true" height="200rpx" />
		</view>
		<view class="empty-data" v-if="wbList.length==0">
			<u-empty mode="data" :marginTop="100" text="无维保任务"></u-empty>
		</view>
		<view class="fixed-btn" @click="togoRepairpage" v-if="current==0">
			<view class="btn-icon iconfont icon-app-saoma">
			</view>
			<view class="btn-txt">快速维保</view>
		</view>
		<view class="fixed-btn3" @click="addMaintenance" v-if="current==0">
			<view class="btn-icon">
				<image src="../../../static/images/index/weiwai.png"></image>
			</view>
			<view class="btn-txt">创建维保</view>
		</view>
		
	</view>
</template>

<script>
	const timeFormat = uni.$u.timeFormat;
	export default {
		data() {
			return {
				status: 'loadmore',
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '待维保任务',
				}, {
					name: '已维保任务',
				}],
				option: [],
				value1: '',
				option2: [{
						text: '全部状态',
						value: ''
					}, {
						text: '待维保',
						value: 0
					},
					{
						text: '维保中',
						value: 1
					}
				],
				value2: '',
				option3: [],
				value3: '',
				wbList: [],
				params: {
					maintainedFlag: 0, //是否是已维保任务；0.否； 1.是 必传
					maintainStatus: '', //维保状态；0.待执行； 1.执行中； 2.执行完成；9.取消；
					maintainType: '', //维保类型
					startTime: '',
					endTime: '',
					pn: 1,
					ps: 5,
					keyword: '',
					fastDeviceNum:''
				},
				pages: 1,
				total: 0
			}
		},
		onLoad(options) {
			this.getWeibaoAllType()
			this.params.fastDeviceNum = ''
			if (options.current) {
				this.current = options.current
				this.wbList = [];
				this.params.pn = 1;
				this.params.ps = 5;
				this.params.maintainedFlag = options.current;
				this.params.maintainStatus = '';
				this.getList();
			} else {
				this.wbList = [];
				this.params.pn = 1;
				this.params.maintainedFlag = 0;
				this.getList();
			}
		},
		

		onPullDownRefresh() {
			if (this.current == 0) { //待维保任务
				this.params.pn = 1;
				this.params.maintainedFlag = 0;
				this.params.maintainStatus = '';
				this.wbList = [];
				this.getList();
			}
			if (this.current == 1) { //已维保任务
				this.wbList = [];
				this.params.pn = 1;
				this.params.maintainedFlag = 1;
				this.params.maintainStatus = '';
				this.getList();
			}

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 400)
		},

		methods: {
			leftClick() {
				uni.switchTab({
					url: '/pages/work/index'
				})
			},
			// getMonth (){
			//   // 获取当前日期
			//   var currentDate = new Date();
			
			//   // 获取当前月份
			//   var currentMonth = currentDate.getMonth();
			
			//   // 获取当前年份
			//   // var currentYear = currentDate.getFullYear();
			
			//   var previousMonthDate1 = new Date();
			//   previousMonthDate1.setMonth(currentMonth - 1);
			//   var previousMonth1 = previousMonthDate1.getMonth();
			//   var previousYear1 = previousMonthDate1.getFullYear();
			  
			//   // 计算前三个月的年份和月份
			//   var previousMonthDate = new Date();
			//   previousMonthDate.setMonth(currentMonth - 3);
			//   var previousMonth = previousMonthDate.getMonth();
			//   var previousYear = previousMonthDate.getFullYear();
			
			//   var formattedPreviousMonth1 = previousYear1 + '-' + (previousMonth1 + 1).toString().padStart(2, '0');
			  
			//   // 格式化年份和月份
			//   var formattedPreviousMonth = previousYear + '-' + (previousMonth + 1).toString().padStart(2, '0');
			  
			//   //前三个月
			//   console.log(formattedPreviousMonth);
			// },
			getWeibaoAllType() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'maintain_type'
				}).then(res => {
					console.log('res---->', res)
					if (res.code == 0) {
						this.option = [];
						this.option3 = [];

						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								let dd = {
									text: item.configValue,
									value: item.id
								}
								this.option.push(dd)
								this.option3.push(dd)
							})
							//这里需要添加一个全部
							this.option.unshift({
								text: '选择维保类型',
								value: ''
							})
							this.option3.unshift({
								text: '选择维保类型',
								value: ''
							})
							this.value1 = this.option[0].value;
							this.value3 = this.option3[0].value;
						} else {
							//这里需要添加一个全部
							this.option.unshift({
								text: '选择维保类型',
								value: ''
							})
							this.option3.unshift({
								text: '选择维保类型',
								value: ''
							})
						}
					}
				}).catch(err => {})
			},
			tabsClick(e) {
				console.log('选择', e)
				// 切换清空id
				if (this.current != e.index) {
					this.params.fastDeviceNum = ''
				}
				this.current = e.index
				if (this.current == 0) { //待维保任务
					this.params.pn = 1;
					this.params.maintainedFlag = 0;
					this.params.maintainStatus = '';
					this.wbList = [];
					this.getList();
				}
				if (this.current == 1) { //已维保任务
					this.wbList = [];
					this.params.pn = 1;
					this.params.maintainedFlag = 1;
					this.params.maintainStatus = '';
					this.getList();
				}

			},
			toggleItem(val) {
				if (val === 1) {
					this.$refs.dropdown1.close()
				}
			},
			change1(val) {
				console.log('===========11', val, this.value1)
				this.wbList = [];
				this.params.pn = 1;
				this.params.maintainedFlag = 0;
				this.params.maintainType = this.value1;
				this.getList();
			},
			change2(val) {
				console.log('===========22', val, this.value2)
				this.wbList = [];
				this.params.pn = 1;
				this.params.maintainedFlag = 0;
				this.params.maintainStatus = this.value2;
				this.getList();
			},
			change3(val) {
				console.log('===========33', val, this.value3)
				this.wbList = [];
				this.params.pn = 1;
				this.params.maintainedFlag = 1;
				this.params.maintainType = this.value3;
				this.getList();
			},
			closeRepair() {
				uni.navigateTo({
					url: '/pages/subPackagesB/weiwaiRepair/closerepair'
				})
			},
			togoRepairpage() {
				const that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					autoDecodeCharset: false,
					autoZoom: false,
					barCodeInput: false,
					success: function(res) {
						console.log('条码内容：' + res.result);
						let codeInfo = res.result.split('?')[1]
						//这里获取扫码信息并且对扫码信息进行解析
						let equId = codeInfo.split('&')[0];
						let deviceNum = codeInfo.split('&')[1];
						that.getMaintenanceList(deviceNum.split('=')[1])
					},
					fail: function(error) {
						console.log('扫码失败了')
					}
				});
			},
			//创建维保
			addMaintenance() {
				uni.navigateTo({
					url: '/pages/subPackagesB/weibaoTask/addMaintenance'
				})
			},
			//获取维保列表
			getMaintenanceList(deviceNum) {
				this.params.pn = 1
				this.params.fastDeviceNum = deviceNum
				uni.$u.http.post(`/device/mobile/deviceMaintainTask/appPageList`, this.params).then(res => {
					console.log(res)
					if (res.code == 0) {
						//跳转到详情页面
						if (res.data.records.length === 1) {
							const {
								id,
								taskOrderNum
							} = res.data.records[0]
							uni.navigateTo({
								url: '/pages/subPackagesB/weibaoTask/weibaoinfo?id=' + id +
									'&taskOrderNum=' +
									taskOrderNum
							})
						}
						//渲染新的列表
						else if (res.data.records.length > 1) {
							this.wbList = res.data.records
							this.pages = res.data.pages;
							this.total = res.data.total;
						} else {
							uni.$u.toast('当前设备无维保任务!')
						}
					}
				}).catch(err => {})
			},
			toSelectDetail(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/weibaoTask/weibaoDetail?wbId=' + item.id
				})
			},
			toStartweibao(item) {
				if (item.maintainStatus == 0 && item.maintainStatus !== '') {
					uni.$u.http.post(`/device/mobile/deviceMaintainTask/startMaintainTask/${item.id}`).then(res => {
						if (res.code == 0) {}
					}).catch(err => {})
				}
				uni.navigateTo({
					url: '/pages/subPackagesB/weibaoTask/weibaoinfo?id=' + item.id + '&taskOrderNum=' + item
						.taskOrderNum
				})
			},
			getList() {
				uni.$u.http.post(`/device/mobile/deviceMaintainTask/appPageList`, this.params).then(res => {
					console.log('res===>列表', res)
					if (res.code == 0) {
						this.wbList = this.wbList.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {})
			},
			copyOrderNum(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
						uni.$u.toast('复制成功')
					}
				});
			}
		},
		onReachBottom() {
			console.log('dfdfd', this.params.pn);
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.tab-page {
		margin-top: 2rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: #8C8C8C;
		padding: 30rpx;
		text-align: center;
		background-color: #F5F5F5;
	}

	.dropdown {
		.list2 {
			.sort {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #000000;
				padding: 20rpx 0;
			}
		}

		.sort-list {
			width: 100%;
			height: 100vh;
			background: #9d9d9d;
			z-index: 22;
			position: absolute;

			.sort-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 40rpx 10rpx 20rpx;
				font-size: 34rpx;
				border-bottom: 1px solid #f2f2f2;
				z-index: 99;
				position: relative;
				background: #fff;
			}

			.sort-item:last-child {
				border-bottom: none;
			}

			.sort-item:first-child {
				border-top: 1px solid #f2f2f2;
			}
		}
	}

	.list-wrapper {
		.list-info {
			margin-top: 10rpx;
			background: #fff;
			padding: 20rpx 40rpx;

			.list-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #666666;

					.copy {
						color: rgba(166, 166, 166, 1);
						font-size: 20rpx;
						margin-left: 10rpx;
						border-radius: 8rpx;
						background: rgba(166, 166, 166, 0.3);
						padding: 4px 6px 4px 6px;
					}
				}

				.title-right {
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 8rpx;
					font-size: 24rpx;
					padding: 0 20rpx;
				}

				.title-ongoing {
					color: rgba(15, 83, 172, 1);
					background-color: rgba(15, 83, 172, 0.2);
				}

				.title-dyz {
					color: rgba(15, 83, 172, 1);
					background-color: rgba(15, 83, 172, 0.2);
				}

				.title-close {
					color: rgba(237, 118, 21, 1);
					background-color: rgba(252, 119, 10, 0.2);
				}

				.title-finish {
					color: rgba(2, 173, 130, 1);
					background-color: rgba(2, 173, 130, 0.2);
				}
			}

		}

		.list-main {
			padding: 4rpx 10rpx 20rpx 10rpx;
			background: #fff;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;

			.item-main {
				display: flex;
				justify-content: space-between;
				padding: 4rpx 30rpx;

				.main-left {
					width: 50%;
					text-align: left;

					.txt1 {
						color: #8c8c8c;
						font-size: 30rpx;
						padding: 10rpx 0;
					}

					.txt2 {
						color: #4D4D4D;
						font-size: 32rpx;
					}

					.txt-zc {
						color: #02AD82;
					}

					.txt-yc {
						color: #FF4D4D;
					}
				}
			}

			.gz-desc {
				padding: 15rpx 30rpx;

				.title {
					font-size: 30rpx;
					color: #8c8c8c;
				}

				.desc-reason {
					font-size: 32rpx;
					color: #2b2b2b;
					margin-top: 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}

		.item-btn {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 24rpx 0;
			background: #fff;

			.chuku {
				width: 45%;
				font-size: 32rpx;
				color: #666666;
				text-align: center;
			}

			.ruku {
				width: 45%;
				font-size: 32rpx;
				color: #0F53AC;
				text-align: center;
			}

			.su-line {
				width: 4rpx;
				height: 50rpx;
				background: #f2f2f2;
			}
		}
	}

	.fixed-btn {
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;
		z-index: 99;
		width: 160rpx;
		height: 160rpx;
		opacity: 1;
		background: rgba(15, 83, 172, 1);
		box-shadow: 0px 2px 6px rgba(10, 61, 128, 0.4);
		border-radius: 50%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #fff;

		.btn-icon {
			margin-top: 20rpx;
			font-size: 60rpx;

			image {
				width: 72rpx;
				height: 72rpx;
			}
		}

		.btn-txt {
			margin-top: 10rpx;
		}
	}
	
	.fixed-btn3 {
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		z-index: 99;
		width: 160rpx;
		height: 160rpx;
		opacity: 1;
		background: rgba(15, 83, 172, 1);
		box-shadow: 0px 2px 6px rgba(10, 61, 128, 0.4);
		border-radius: 50%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #fff;
	
		.btn-icon {
			margin-top: 25rpx;
	
			image {
				width: 52rpx;
				height: 52rpx;
			}
		}
	}

	.bottom-subside {
		width: 100%;
		height: 44rpx;
	}

	.u-empty .u-icon {
		z-index: -1;
	}

	.u-tabs__wrapper__nav__item {
		// padding: 0 !important;
		width: 50%;
	}
</style>
